<div class="body">
  <div class="header">
    <div class="header-title">AllToMP3</div>
    <div class="header-logos">
      <i class="icon-youtube"></i>
      <i class="icon-soundcloud"></i>
      <i class="icon-spotify"></i>
      <i class="icon-deezer"></i>
    </div>
    <div class="header-contact">
      <div id="share-btn" class="share-div" (click)="shareClick()" (mouseout)="shareLeave()" data-clipboard-text="https://alltomp3.org">
        <div class="tooltip">
          <i class="icon-export"></i>
          <span class="tooltiptext" i18n *ngIf="!shareCopied">Click to copy a link to AllToMP3's website, to share it with friends 😎</span>
          <span class="tooltiptext" i18n *ngIf="shareCopied">Copied in clipboard!</span>
        </div>
      </div>
      <div id="share-btn" class="share-div" (click)="donateClick()">
        <div class="tooltip">
          <i class="icon-heart"></i>
          <span class="tooltiptext" i18n>Like this program? Help me!</span>
        </div>
      </div>
      <app-feedback></app-feedback>
    </div>
  </div>

  <div class="input-div">
    <form method="post" (submit)="execute($event)">
      <input type="text" class="input-main" id="input-main" i18n-placeholder placeholder="What do you want to download?" (keydown)="search($event)" name="queryi" [(ngModel)]="queryi" autofocus="autofocus" [ngClass]="{'input-main-open': (suggestions.songs || suggestions.albums)}" (contextmenu)="contextMenu.openEditMenu()" />
      <button type="submit" style="display: none"></button>
    </form>
    <div class="legend" *ngIf="unsupported" i18n>
      This URL is not supported
    </div>
    <div class="legend" *ngIf="legend && !unsupported" i18n>
      Press <span class="label">Enter</span> to download
    </div>
    <div *ngIf="suggestions.songs || suggestions.albums">
      <app-suggestion *ngFor="let suggestion of suggestions.songs; let i = index" [suggestion]="suggestion" [type]="'track'" (click)="selectSuggestion(suggestion, 'track')" [active]="i === activeSuggestion"></app-suggestion>
      <app-suggestion *ngFor="let suggestion of suggestions.albums; let i = index; let l = last" [suggestion]="suggestion" [type]="'album'" (click)="selectSuggestion(suggestion, 'album')" [active]="i === (activeSuggestion - suggestions.songs.length)" [last]="l"></app-suggestion>
    </div>
    <saving-path></saving-path>
  </div>

  <div class="requests-div">
    <app-request *ngFor="let r of requests" [request]="r"></app-request>
  </div>

  <div class="help-div" *ngIf="displayHelp">
    <app-help [selectProposal]="selectProposal()"></app-help>
  </div>
  <div class="news-div" *ngIf="!displayHelp">
    <app-news></app-news>
  </div>
</div>
